<!-- @format -->
<script setup>
	import { ref, nextTick } from 'vue'

	const count = ref(0)

	const btnRef = ref(null)

	const increment = async () => {
		// 让 count 自增
		count.value++

		// 问题：当 count 变了，但获取到的 button 的内容 并不是同步的
		// 原因：在 Vue 中，数据变了，DOM的更新是异步的、批量的
		// 解决方案：在 nextTick() 时机获取更新的后DOM
		// nextTick()使用方式有2种：
		// 1）一种是借助await+async等待 nextTick() 执行结束
		// 2）另一种给nextTick(()=> {}) 传入回调函数，在回调中获取更新的后的DOM
		// 获取 button 的内容

		// 应用场景：数据变了，想获取更新后的DOM，就需要 nextTick() 闪亮登场
		await nextTick()
		console.log(btnRef.value.textContent)

		// nextTick(() => {
		// 	console.log(btnRef.value.textContent)
		// })
	}
</script>

<template>
	<button
		@click="increment"
		ref="btnRef">
		{{ count }}
	</button>
</template>

<style lang="scss" scoped></style>
